<template>
	<div class="newstore-wrap">
		<!-- 版心1090 -->
		<div class="newstore-container">
			<div class="header">
				<div class="header-left">
					<h3>猜你喜欢</h3>
				</div>
			</div>
			<!-- 轮播图位置 -->
			<div class="body">
				<div class="swiper-container swiper" ref="swiper">
					<!-- 轮播 -->
					<div class="swiper-wrapper">
						<!-- 每一个item -->
						<div
							class="swiper-slide"
							v-for="(newItem, index) in newItemList"
							:key="index"
						>
							<div class="body-item">
								<div class="store-img">
									<img class="img" :src="newItem.primaryPicUrl" alt="" />
									<img class="img-hidden" :src="newItem.listPicUrl" alt="" />
								</div>
								<span class="store-introduce">{{ newItem.name }}</span>
								<p class="store-price">
									<span class="price-height">
										{{ newItem.counterPrice ? newItem.counterPrice : "无价格" }}
									</span>
									<span class="price-low">￥暂无数据</span>
								</p>
							</div>
						</div>
					</div>
					<!-- 底部分页器 -->
					<!-- <div class="swiper-pagination"></div> -->
				</div>
				<!-- 左右翻页器 -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
	</div>
</template>

<script>
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
export default {
	name: "NewStore",
	props: ["newItemList"],
	data() {
		return {}
	},
	mounted() {},
	watch: {
		newItemList: {
			handler(newItemList) {
				// 如果没有数据,不加载
				if (!newItemList.length) return
				// dom页面渲染完成后再启用轮播图
				this.$nextTick(() => {
					// 轮播图效果
					new Swiper(this.$refs.swiper, {
						// 每页显示4张轮播图
						slidesPerView: 4,
						// 滚动一次走4张
						slidesPerGroup: 4,
						// 两张之间的距离
						// spaceBetween: 10,
						// 左右箭头
						navigation: {
							nextEl: ".swiper-button-next",
							prevEl: ".swiper-button-prev",
						},
					})
				})
			},
			immediate: true,
		},
	},
}
</script>

<style lang="less" scoped>
.newstore-wrap {
	margin-top: 30px;
	width: 100%;
	padding-bottom: 10px;
	.newstore-container {
		margin: 0 auto;
		width: 1090px;
	}
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 30px;
	.header-left {
		display: flex;
		align-items: flex-end;
		h3 {
			font-size: 28px;
			margin-left: 40px;
			margin-top: 20px;
			a:hover {
				color: #e2c199 !important;
			}
		}
		p {
			font-size: 14px;
			padding-bottom: 3px;
		}
	}
}
// 翻页器和分页器样式
.body {
	// --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
	--swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
	--swiper-navigation-size: 20px; /* 设置按钮大小 */
}
// 左右翻页器样式
.body {
	position: relative;
	.swiper-button-next,
	.swiper-button-prev {
		position: absolute;
		height: 50px;
		width: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 50%;
		background-color: #e2c199;
	}
	.swiper-button-next {
		right: -55px;
	}
	.swiper-button-next:hover {
		background-color: #cc9756;
	}
	.swiper-button-prev {
		left: -55px;
	}
	.swiper-button-prev:hover {
		background-color: #cc9756;
	}
}
.my-button-disabled {
	background-color: #e7e2d7;
}
// .body {
//   position: relative;
// }
.body-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 265px;
	.store-img {
		position: relative;
		width: 265px;
		height: 265px;
		.img,
		.img-hidden {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.img-hidden {
			display: none;
		}
	}

	.store-introduce {
		display: block;
		text-align: center;
		margin-top: 20px;
		color: #333;
		font-size: 13px;
		font-weight: bold;
		width: 160px;
	}
	.store-price {
		padding: 5px 0 10px;
		.price-height {
			color: red;
			font-size: 14px;
			margin-right: 5px;
		}
		.price-low {
			text-decoration: line-through;
			color: #999;
			font-size: 13px;
		}
	}
}
.body-item:hover {
	background-color: #f4f0ea;
	.img-hidden {
		display: block;
	}
	.img {
		display: none;
	}
}
</style>
